<script setup lang="ts">
import { NfFlag, flagCountryMap } from "@wenqian/nf-ui";
</script>

<template>
  <div class="list">
    <div v-for="item in flagCountryMap" :key="item['alpha-2']" class="item">
      <nf-flag :country="item.cname" />
      <div>{{ item.cname }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;

  .item {
    text-align: center;
    border-bottom: 1px solid #dcdfe6;
    border-right: 1px solid #dcdfe6;
  }
}
</style>
